<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
        }

        .ball {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="ball"></div>




    <script>

        var ball = document.querySelector('.ball');

        animate(ball, {
            left: 600,
            top: 200,
            width: 160,
            height: 160
        }, 'click');


        function animate(ele, eleStyle, event) {

            ele.addEventListener(event, function () {
                clearInterval(timer);

                var timer = setInterval(function () {
                    let isOk = true;

                    for (let k in eleStyle) {
                        // 设置目标位置、样式
                        let target = eleStyle[k];
                        let leader = parseInt(window.getComputedStyle(ele, null)[k]);

                        // 步长
                        let step = (target - leader) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);

                        // 获取单步执行完的位置
                        leader = leader + step;
                        // 元素位置更新
                        ele.style[k] = leader + 'px';
                        if (leader != target) {
                            isOk = false;
                        }
                    }

                    // 所有动画已完成，清除定时器
                    if (isOk) {
                        clearInterval(timer);
                    }
                }, 1000 / 60);
            })
        }


    </script>
</body>

</html>